<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="../common.js"></script>
<style>
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    #div1 {
        text-align: center;
        position: absolute;
        bottom: 0px;
        width: 800px;
        margin: 0 auto;
    }

    #div1 img {
        border: none;
    }

    #div1 .box {
        display: block;
        width: 400px;
        margin: 0 auto;
        border-bottom: dotted 1px black;
        text-decoration: none;
        color: #333;
    }

    #div1 .box:hover {
        border-bottom: solid 1px black;
    }
</style>
</style>
<script>
    onload = function () {

        document.onmousemove = function (evt) {
            var imgs = document.getElementsByTagName("img");
            var evt = evt || event;
            //获取当前鼠标位置
            var mouse = {
                x: evt.clientX,
                y: evt.clientY
            };
            //计算每张图片中心与当前鼠标位置之间的距离,
            for (var i = 0; i < imgs.length; i++) {
                //获取图片数组的位置
                var imgPos = getPagePos(imgs[i]);
                //获取图片中心位置
                imgPos.x += imgs[i].offsetWidth / 2;
                imgPos.y += imgs[i].offsetHeight / 2;
                //计算鼠标与图片图片之间的距离
                var distance = Math.sqrt(Math.pow((mouse.x - imgPos.x), 2) + Math.pow((mouse.y - imgPos.y), 2));
                //设置图片新的宽度大小
                imgs[i].style.width = Math.max(200 - distance, 60)+"px";
            }





        }
    }
</script>

<body>
    <div id="div1">
        <a href="#"><img src="images/1.png" width="64" /></a>
        <a href="#"><img src="images/2.png" width="64" /></a>
        <a href="#"><img src="images/3.png" width="64" /></a>
        <a href="#"><img src="images/4.png" width="64" /></a>
        <a href="#"><img src="images/5.png" width="64" /></a>
    </div>
</body>

</html>